@layout("/common/_container.html"){
<div class="container-fluid" style="padding: 0 !important;">
	<style>
		html, body {
			padding: 0px;
			margin: 0px;
			background: #222;
			font-family: 'Arvo', sans-serif;
			color: #000000;
			height: 100%;
		}
		div{
			display: inline;
		}
		body {
			display: flex;
			padding: 10px;
		}

		cs-app, cs-app * {
			box-sizing: border-box;
			border: none;
			background: transparent;
			padding: 0;
			margin: 0;
			display: block;
		}

		cs-app {
			margin: auto;
			width: 100%;
			max-width: 450px;
		}
		cs-app cs-title {
			text-align: center;
			margin-bottom: 10px;
			font-size: 21px;
		}
		cs-app cs-tiles {
			height: 344px;
			position: relative;
		}
		cs-app cs-tiles input {
			display: none;
		}
		cs-app cs-tiles cs-tile-container {
			display: flex;
			position: absolute;
			height: 85px;
			-webkit-transform: translateX(-50%);
			transform: translateX(-50%);
			transition: all 0.15s 0.15s;
			z-index: 1000;
		}
		cs-app cs-tiles cs-tile-container cs-tile {
			background: #36f;
			margin: auto;
			width: 90%;
			height: 80%;
			border-radius: 2px;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
			position: relative;
			transition: all 0.15s 0.15s, background 0.15s;
		}
		cs-app cs-tiles cs-tile-container cs-tile:hover {
			box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.75);
			background: #668cff;
		}
		cs-app cs-tiles cs-tile-container cs-tile cs-text {
			transition: all 0.15s 0.15s;
			width: 100%;
			text-align: center;
			line-height: 70px;
			white-space: nowrap;
			text-transform: uppercase;
		}
		cs-app cs-tiles cs-tile-container cs-tile cs-content {
			transition: all 0.15s, max-height 0s;
			opacity: 0;
			pointer-events: none;
			overflow: hidden;
			max-height: 0;
		}
		cs-app cs-tiles cs-tile-container cs-tile .cs-open {
			cursor: pointer;
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
		}
		cs-app cs-tiles cs-tile-container cs-tile .cs-close {
			cursor: pointer;
			transition: all 0.15s;
			position: absolute;
			opacity: 0;
			top: 25px;
			right: 25px;
			-webkit-transform: rotateZ(45deg) translateX(-50%) translateY(-50%);
			transform: rotateZ(45deg) translateX(-50%) translateY(-50%);
			font-size: 25px;
		}
		cs-app cs-tiles input:checked + cs-tile-container {
			transition: all 0.25s;
			width: 100%;
			height: 100%;
			left: 50%;
			top: 50%;
			-webkit-transform: translateX(-50%) translateY(-50%);
			transform: translateX(-50%) translateY(-50%);
			z-index: 10000;
		}
		cs-app cs-tiles input:checked + cs-tile-container cs-tile {
			transition: all 0.25s;
			background: #ffffff;
			height: 80%;
			width: 80%;
			display: flex;
			flex-direction: column;
			padding: 20px;
			box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
		}
		cs-app cs-tiles input:checked + cs-tile-container cs-tile:hover {
			cursor: initial;
		}
		cs-app cs-tiles input:checked + cs-tile-container cs-tile .cs-open {
			display: none;
		}
		cs-app cs-tiles input:checked + cs-tile-container cs-tile .cs-close {
			transition: all 0.15s 0.25s;
			opacity: 1;
		}
		cs-app cs-tiles input:checked + cs-tile-container cs-tile .cs-close:hover {
			transition: all 0.15s;
			opacity: 0.5;
		}
		cs-app cs-tiles input:checked + cs-tile-container cs-tile cs-text {
			transition: all 0.15s 0.25s;
			font-size: 24px;
			line-height: 50px;
		}
		cs-app cs-tiles input:checked + cs-tile-container cs-tile cs-content {
			flex: 1;
			transition: all 0.25s 0.4s, max-height 0s 0.4s, flex 0s 0.4s;
			opacity: 1;
			margin-top: 10px;
			pointer-events: initial;
			width: 100%;
			max-height: 1000000px;
			overflow: hidden;
		}
		cs-app cs-tile-container:nth-of-type(1) {
			left: calc(0 * 33.334% + 1 * 16.667%);
			top: calc(0 * 85px);
			width: 33.334%;
		}
		cs-app cs-tile-container:nth-of-type(2) {
			left: calc(1 * 33.334% + 1 * 16.667%);
			top: calc(0 * 85px);
			width: 33.334%;
		}
		cs-app cs-tile-container:nth-of-type(3) {
			left: calc(2 * 33.334% + 1 * 16.667%);
			top: calc(0 * 85px);
			width: 33.334%;
		}
		cs-app cs-tile-container:nth-of-type(4) {
			left: calc(0 * 33.334% + 1 * 16.667%);
			top: calc(1 * 85px);
			width: 33.334%;
		}
		cs-app cs-tile-container:nth-of-type(5) {
			left: calc(1 * 33.334% + 1 * 16.667%);
			top: calc(1 * 85px);
			width: 33.334%;
		}
		cs-app cs-tile-container:nth-of-type(6) {
			left: calc(2 * 33.334% + 1 * 16.667%);
			top: calc(1 * 85px);
			width: 33.334%;
		}
		cs-app cs-tile-container:nth-of-type(7) {
			left: calc(0 * 33.334% + 1 * 16.667%);
			top: calc(2 * 85px);
			width: 33.334%;
		}
		cs-app cs-tile-container:nth-of-type(8) {
			left: calc(1 * 33.334% + 1 * 16.667%);
			top: calc(2 * 85px);
			width: 33.334%;
		}
		cs-app cs-tile-container:nth-of-type(9) {
			left: calc(2 * 33.334% + 1 * 16.667%);
			top: calc(2 * 85px);
			width: 33.334%;
		}
		cs-app cs-tile-container:nth-of-type(10) {
			left: calc(0 * 33.334% + 1 * 16.667%);
			top: calc(3 * 85px);
			width: 33.334%;
		}
		cs-app cs-tile-container:nth-of-type(11) {
			left: calc(1 * 33.334% + 1 * 16.667%);
			top: calc(3 * 85px);
			width: 33.334%;
		}
		cs-app cs-tile-container:nth-of-type(12) {
			left: calc(2 * 33.334% + 1 * 16.667%);
			top: calc(3 * 85px);
			width: 33.334%;
		}

	</style>
	<script>
        var demo1 = document.querySelector('#demo-1')
        var demo2 = document.querySelector('#demo-2')

        setTimeout(() => { demo1.checked = true }, 500)
        setTimeout(() => { demo1.checked = false}, 1500)
        setTimeout(() => { demo2.checked = true }, 2000)
        setTimeout(() => { demo2.checked = false}, 3000)

	</script>
	<div class="row" style=" width: 49%;height: 400px;float: left">
		<cs-app>
			<cs-title style="color: black">更多小功能模块</cs-title>
			<cs-tiles>
				<input type="checkbox" id="demo-1"/>
				<cs-tile-container>
					<cs-tile>
						<label class="cs-open" for="demo-1"></label>
						<label class="cs-close" for="demo-1">+</label>
						<cs-text>通知信息</cs-text>
						<cs-content>
							<div class="col-sm-12">
								@for(notice in noticeList){
								<div class="alert alert-success alert-dismissable">
									<button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
									${notice.content}
								</div>
								@}
							</div>
						</cs-content>
					</cs-tile>
				</cs-tile-container>
				<input type="checkbox" id="demo-2"/>
				<cs-tile-container>
					<cs-tile >
						<label class="cs-open" for="demo-2"></label>
						<label class="cs-close" for="demo-2">+</label>
						<cs-text>强制开启某个主机</cs-text>
						<cs-content>
							<div>确定要强制开启嘛？</div>
							<div style="margin-top: 10%;float:left">
								主机
								<select id="lc3" ></select>
								</div><div style="margin-top: 10%;">
								开启模式
								<select id="lc2">
									<option value =0>关门</option>
									<option value =1>开门</option>
									<option value=2>常开</option>
									<option value=3>常关</option>
								</select>

							</div>
							<div style="margin-top: 10%">
								<#button btnCss="info" name="确定" id="door" icon="fa-check" clickFun="CarInfoDlg.addSubmit()"/>
								<#button btnCss="danger" name="取消" id="cancel" icon="fa-eraser" clickFun="test()"/>
							</div>
						</cs-content>
					</cs-tile>
				</cs-tile-container>
				<input type="checkbox" id="demo-3"/>
				<cs-tile-container>
					<cs-tile >
						<label class="cs-open" for="demo-3"></label>
						<label class="cs-close" for="demo-3">+</label>
						<cs-text>强制开启所有门</cs-text>
						<cs-content>
							<div>确定 要强制开启嘛？</div>
							<div style="margin-top: 10%">开启模式
								<select id="lc">
									<option value =0>关门</option>
									<option value =1>开门</option>
									<option value=2>常开</option>
									<option value=3>常关</option>
								</select>
							</div>
							<div style="margin-top: 10%">
								<#button btnCss="info" name="确定" id="allDoor" icon="fa-check" />
								<#button btnCss="danger" name="取消" id="cancel" icon="fa-eraser" clickFun="CarInfoDlg.close()"/>
							</div>
						</cs-content>
					</cs-tile>
				</cs-tile-container>
				<input type="checkbox" id="demo-4"/>
				<cs-tile-container>
					<cs-tile>
						<label class="cs-open" for="demo-4"></label>
						<label class="cs-close" for="demo-4">+</label>
						<cs-text>研发中.....</cs-text>
						<cs-content>研发中.....</cs-content>
					</cs-tile>
				</cs-tile-container>
				<input type="checkbox" id="demo-5"/>
				<cs-tile-container>
					<cs-tile>
						<label class="cs-open" for="demo-5"></label>
						<label class="cs-close" for="demo-5">+</label>
						<cs-text>研发中.....</cs-text>
						<cs-content>研发中.....</cs-content>
					</cs-tile>
				</cs-tile-container>
				<input type="checkbox" id="demo-6"/>
				<cs-tile-container>
					<cs-tile>
						<label class="cs-open" for="demo-6"></label>
						<label class="cs-close" for="demo-6">+</label>
						<cs-text>研发中.....</cs-text>
						<cs-content>研发中.....</cs-content>
					</cs-tile>
				</cs-tile-container>
				<input type="checkbox" id="demo-7"/>
				<cs-tile-container>
					<cs-tile>
						<label class="cs-open" for="demo-7"></label>
						<label class="cs-close" for="demo-7">+</label>
						<cs-text>研发中.....</cs-text>
						<cs-content>研发中.....</cs-content>
					</cs-tile>
				</cs-tile-container>
				<input type="checkbox" id="demo-8"/>
				<cs-tile-container>
					<cs-tile>
						<label class="cs-open" for="demo-8"></label>
						<label class="cs-close" for="demo-8">+</label>
						<cs-text>研发中.....</cs-text>
						<cs-content>研发中.....</cs-content>
					</cs-tile>
				</cs-tile-container>
				<input type="checkbox" id="demo-9"/>
				<cs-tile-container>
					<cs-tile>
						<label class="cs-open" for="demo-9"></label>
						<label class="cs-close" for="demo-9">+</label>
						<cs-text>研发中.....</cs-text>
						<cs-content>研发中.....</cs-content>
					</cs-tile>
				</cs-tile-container>
				<input type="checkbox" id="demo-10"/>
				<cs-tile-container>
					<cs-tile>
						<label class="cs-open" for="demo-10"></label>
						<label class="cs-close" for="demo-10">+</label>
						<cs-text>研发中.....</cs-text>
						<cs-content>研发中.....</cs-content>
					</cs-tile>
				</cs-tile-container>
				<input type="checkbox" id="demo-11"/>
				<cs-tile-container>
					<cs-tile>
						<label class="cs-open" for="demo-11"></label>
						<label class="cs-close" for="demo-11">+</label>
						<cs-text>研发中.....</cs-text>
						<cs-content>研发中.....</cs-content>
					</cs-tile>
				</cs-tile-container>
				<input type="checkbox" id="demo-12"/>
				<cs-tile-container>
					<cs-tile>
						<label class="cs-open" for="demo-12"></label>
						<label class="cs-close" for="demo-12">+</label>
						<cs-text>研发中.....</cs-text>
						<cs-content>研发中.....</cs-content>
					</cs-tile>
				</cs-tile-container>
			</cs-tiles>
		</cs-app>

	</div>
	<div id="main" style="width: 50%;height:400px;float: right"></div>
	<div style="width: 100%;height: 20%;text-align:center">
		<table class="table table-hover table-striped table-bordered" id="table-result" cellspacing="0" style="width:90% ; margin: auto">
			<tr >
				<th style="text-align:center;">序号</th>
				<th style="text-align:center;">名称</th>
				<th style="text-align:center;">卡号</th>
				<th style="text-align:center;">开门状态</th>
				<th style="text-align:center;">门号</th>
				<th style="text-align:center;">进出</th>
				<th style="text-align:center;">刷卡时间</th>
				<th style="text-align:center;">打卡次数</th>
			</tr>
			<tbody id="result"></tbody>
		</table>
	</div>
	<script>
		$(function () {
			$.ajax({
				url:"/doorAlarmRecord/blacklist",
				type:"get",
				dataType:"json",
				success:function (data) {
					 var str = "";
					 var tbody = $("#result");
					 var number = 1
					 $.each(data,function (i,item) {
						 str += "<tr>"+
							  "<td>"+number+"</td>"+
                             "<td>"+item.name+"</td>"+
                             "<td>"+item.cardno+"</td>"+
                             "<td>"+item.openDoorStatus+"</td>"+
                             "<td>"+item.doorNumber+"</td>"+
                             "<td>"+item.inOut+"</td>"+
                             "<td>"+item.time+"</td>"+
							  "<td>"+item.note1+"</td>"+
							  "</tr>";
						 	number=number+1;
                     })

					 tbody.html(str);

                },
				error:function () {
					alert("查询失败")
                }
			})
        })
	</script>



	<script>
    var objSelectNow=document.getElementById("lc3");

    $.ajax({
        type:'post',
        url:'/deviceTime/status',
        dataType:'json',
        success:function(data){
            for (var i=0;i<data.length;i++)
            {
                objSelectNow.options.add(new Option(data[i].name,data[i].name));
            }
        }
    });



</script>
	<script>
	$(function(){
    $('#door').click(function(){
         $.ajax({
             type: "GET",
             url: "/deviceTime/openDoor",
             data: {name:$("#lc3").val(),dwStaic:$("#lc2").val()},
             dataType: "json",
             success: function(data){
                         alert("操作成功");
                      }
         });
    });
});
		$(function(){
    $('#allDoor').click(function(){
         $.ajax({
             type: "GET",
             url: "/deviceTime/openAllDoor",
             data: {dwStaic:$("#lc").val()},
             dataType: "json",
             success: function(data){
                         alert("操作成功");
                      }
         });
    });
});
	</script>
	<script>

        $(function () {
            var myChart = echarts.init(document.getElementById('main'));
            var a = [] //创建一个对象
            $.ajax({
                url: "/record/selectList",//获取数据的URL
                type: "POST",//HTTP请求方法
                async : false,
                success:function(data) {
                    for (var i=0;i<data.length;i++){
                        var b=data[i];
                        a.push(b);
					}


                }
            });
            var option={
                title: {
                    text: '今日开门成功和失败',
                    subtext: '日志反馈'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data:['开门成功','开门失败']
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        dataView: {readOnly: false},
                        magicType: {type: ['line', 'bar']},
                        restore: {},
                        saveAsImage: {}
                    }
                },
                xAxis:  {
                    type: 'category',
                    boundaryGap: false,
                    data: ['开门成功','开门失败']
                },
                yAxis: {
                    type: 'value',
					min:0,
					minInterval:1,
                    axisLabel: {
                        formatter: '{value}次'
                    }
                },

                series: [
                    {

                        name:'最高日志',
                        type:'line',
                        data:a,
                        markPoint: {
                            data: [
                                {type: 'max', name: '最大值'},
                                {type: 'min', name: '最小值'}
                            ]
                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'}
                            ]
                        }
                    },

                ]
            }

            myChart.setOption(option);
            });
	</script>

</div>

@}
